<template>
	<view style="display: flex;flex-direction: column;width: 100%;padding: 30rpx;">
		<view style="display: flex;align-items: center;">
			<image :src="data.avatar" style="width: 90rpx;height: 90rpx;border-radius: 8rpx;" mode=""></image>
			<view style="display: flex;flex-direction: column;flex:1;margin-left: 12rpx;">
				<view style="font-size: 32rpx;">
					{{data.name}}
				</view>
				<view style="font-size: 25rpx;color: #999999;margin-top: 10rpx;">
					{{makePhoneStr(data.phone)}}
				</view>
			</view>
		</view>
		<u-line margin="30rpx auto" height="1rpx" />
		<view style="color: #333;font-size: 28rpx;padding: 10rpx;">
			签名：{{data.note}}
		</view>
		<view style="color: #333;font-size: 28rpx;padding: 10rpx;">
			来源：{{data.fromType}}
		</view>
		<u-line margin="30rpx auto" />
		<view style="position: fixed;bottom: 50rpx; width: 690rpx;display: flex;justify-content: center;">
			<view style="width: 500rpx;">
				<u-button @click="show = true" shape="circle" type="primary" size="default">申请添加好友</u-button>
			</view>
		</view>
		
		<u-popup v-model="show" mode="center" border-radius="16">
			<view style="padding: 30rpx;display: flex;flex-direction: column;width: 600rpx;">
				<view style="margin: 10rpx 0rpx 20rpx 0rpx;font-weight: 500;font-size: 36rpx;">
					填写申请好友信息
				</view>
				<u-input v-model="value" type="textarea" :border="border" />
				<view style="margin: 30rpx auto 10rpx auto;font-weight: 500;">
					<u-button @click="sendAddUserApply" shape="circle" type="primary" size="medium">发送申请</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				show:false,
				value:"",
				border:true,
				id:'',
				data:{
					fromType:"搜索"
				}
			}
		},
		async onLoad({id,fromType}) {
			if(fromType){
				this.data.fromType = fromType
			}
			if(!id){
				uni.showToast({
					title:"数据错误",
					icon:"none"
				})
				uni.switchTab({
					url:"/pages/index/index"
				})
				return
			}
			this.id = id
			const ret = await this.$u.get(`/user/user/${id}`)
			console.log(id,ret)
			if(!ret.success){
				uni.showToast({
					title:"数据错误",
					icon:"none"
				})
				uni.switchTab({
					url:"/pages/index/index"
				})
				return
			}
			this.data = {...this.data,...ret.data}
		},
		methods:{
			makePhoneStr: function(tel) {
				if(!tel){ return "" }
				return tel.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
			},
			sendAddUserApply: async function(){
				const ret = await this.$u.post(`/user/user/sendAddUserApply`,{
					message:this.value,
					toId:this.id
				})
				if(ret.success){
					uni.showToast({
						title:"发送成功",
						complete() {
							uni.switchTab({
								url:"/pages/address/index"
							})
						}
					})
					
				}else{
					uni.showToast({
						title:ret.message ?? "发送失败"
					})
				}
			}
		}
	}
</script>

<style>
</style>